<template>
	<view class="container">
		<view class="tit" @click="popup">
			<text>选择机柜</text>
			<image src="/static/img/detail/right.png" mode="widthFix"></image>
		</view>

		<view class="report" v-if="report">
			<view class="title">
				<text>日期</text>
				<view class="content">
					<view>
						<view class="spot blue">

						</view>
						<text>充电次数</text>
					</view>
					<view>
						<view class="spot green">

						</view>
						<text>平均时长</text>
					</view>
					<view>
						<view class="spot red">

						</view>
						<text>消耗总额</text>
					</view>
					<view>
						<view class="spot orange">

						</view>
						<text>活跃用户</text>
					</view>
					<view>
						<view class="spot violet">

						</view>
						<text>平均功率</text>
					</view>
					<view>
						<view class="spot lightBlue">

						</view>
						<text>消耗电度</text>
					</view>
				</view>
			</view>
			<view class="con">
				<view class="item" v-for="(item,index) in dataList" :key="item.id">
					<view class="date">
						{{item.create_text}}
					</view>
					<view class="content">
						<view>
							<view class="spot blue">

							</view>
							<text>{{item.chongdian_num}}</text>
						</view>
						<view>
							<view class="spot green">

							</view>
							<text>{{item.shichang}}</text>
						</view>
						<view>
							<view class="spot red">

							</view>
							<text>{{item.xiaohao}}</text>
						</view>
						<view>
							<view class="spot orange">

							</view>
							<text>{{item.huoyue}}</text>
						</view>
						<view>
							<view class="spot violet">

							</view>
							<text>{{item.gonglv}}</text>
						</view>
						<view>
							<view class="spot lightBlue">

							</view>
							<text>{{item.haodian}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>




		<view class="mask" v-if="operation">
			<view class="operation">
				<view class="tit">
					<text @click="select">全选</text>
					<text>设备列表</text>
					<text @click="confirm">确认</text>
				</view>

				<view class="list">
					<view class="list_item" v-for="(item,index) in list" :key="item.id">
						<view class="left">
							<image src="/static/img/agent/battery.png" mode="widthFix"></image>
							<view>
								<view>
									{{item.name}}
								</view>
								<view class="money">
									总收入<text>￥{{item.all_income}}</text>
								</view>
							</view>
						</view>
						<view class="right">
							<radio :checked="item.isCheck" color="#34ACEF" @click="radio(index)" />
						</view>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		reportForm,
		batteryList
	} from '../../../api/api.js'
	export default {
		data() {
			return {
				operation: false,
				report: false,
				list: [],
				ids: [],
				dataList: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			popup() {
				this.operation = true
			},
			radio(index) {
				this.list[index].isCheck = !this.list[index].isCheck
				if (this.list[index].isCheck == true) {
					this.ids.push(this.list[index].id)
				} else {
					for (let i = 0; i < this.ids.length; i++) {
						if (this.ids[i] == this.list[index].id) {
							this.ids.splice(i, 1)
						}
					}
				}
			},
			select() {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isCheck = true
				}
				// setTimeout(function() {

				// }, 1000);
				this.operation = false
				this.report = true
				this.ids = [0]
				this.getForm()
			},
			confirm() {
				if (this.list.findIndex(i => i.isCheck === true) == -1) {
					uni.showToast({
						icon: 'none',
						title: '请选择机柜'
					})
				} else {
					// console.log(this.list.filter(i => i.isCheck == true))
					this.operation = false
					this.report = true
					this.getForm()
				}
			},
			getList() {
				batteryList().then(res => {
					console.log(res)
					for (let i = 0; i < res.data.length; i++) {
						res.data[i].isCheck = false
					}
					this.list = res.data
				})
			},
			getForm() {
				reportForm({
					ctype: 1
				}).then(res => {
					console.log(res)
					this.dataList = res.data.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.tit {
		width: calc(100% - 60upx);
		height: 100upx;
		background-color: #FFFFFF;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 15upx;
		}
	}

	.report {
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 30upx;

		.title {
			width: calc(100% - 60upx);
			height: 130upx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;


			.content {
				width: 80%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				view {
					width: 30%;
					background-color: #FFFFFF;
					height: 50%;
					display: flex;
					align-items: center;
					// justify-content: space-around;

					.spot {
						width: 15upx;
						height: 15upx;
						border-radius: 50%;
						margin: 0 10upx;
					}

					.blue {
						background-color: #46b5ff;
					}

					.green {
						background-color: #37c666;
					}

					.red {
						background-color: #ff6566;
					}

					.orange {
						background-color: #ffa240;
					}

					.violet {
						background-color: #e274ff;
					}

					.lightBlue {
						background-color: #19d8c9;
					}

				}

			}
		}

		.con {
			width: calc(100% - 60upx);
			padding: 15upx 30upx 0;
			border-top: 1upx solid #eae7eb;

			.item {
				min-height: 170upx;

				.date {
					height: 40upx;
				}

				.content {
					width: 80%;
					float: right;
					height: 130upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					view {
						width: 30%;
						background-color: #FFFFFF;
						height: 50%;
						display: flex;
						align-items: center;
						// justify-content: space-around;

						.spot {
							width: 15upx;
							height: 15upx;
							border-radius: 50%;
							margin: 0 10upx;
						}

						.blue {
							background-color: #46b5ff;
						}

						.green {
							background-color: #37c666;
						}

						.red {
							background-color: #ff6566;
						}

						.orange {
							background-color: #ffa240;
						}

						.violet {
							background-color: #e274ff;
						}

						.lightBlue {
							background-color: #19d8c9;
						}

					}

				}

			}


		}
	}




	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.operation {
			width: 580upx;
			// height: 200upx;
			padding: 10upx 0;
			background: #FFFFFF;
			border-radius: 12px;
			position: relative;
			overflow: hidden;

			.tit {
				width: calc(100% - 60upx);
				height: 60upx;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.list {
				width: 100%;
				background-color: #FFFFFF;
				min-height: 600upx;

				.list_item {
					width: calc(100% - 60upx);
					height: 150upx;
					margin: 0 auto;
					border-bottom: 1upx solid #e9e6e9;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 80upx;
							margin-right: 10upx;
						}

						view {
							font-size: 28upx;

							.money {
								font-size: 24upx;
								color: #999999;

								text {
									color: #fb817f;
								}
							}
						}

						// text {
						// 	font-size: 24upx;
						// 	color: #999;
						// }
					}

					.right {
						display: flex;
						align-items: center;

						input {
							min-width: 250upx;
							text-align: right;
							margin-right: 10upx;
						}

						text {
							font-size: 28upx;
							color: #999999;
						}

						image {
							width: 15upx;
							margin-left: 10upx;
						}
					}

					.img {
						image {
							width: 40upx;
						}
					}
				}

			}


		}
	}
</style>
